<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>CPS test by nyh</title>
    <style>
        * {
            box-sizing: border-box !important;
            user-select: none !important
        }
        
        body {
            margin: 0 !important;
            padding: 0 !important
        }
        
        #main-button {
            text-align: center !important;
            outline: medium !important;
            width: 100vw !important;
            height: 100vh !important;
            font-size: 5vw !important;
            margin: 0 !important;
            padding: 25vh 0 0 0 !important;
            border: none !important;
            font-weight: 600 !important;
            color: rgb(238, 238, 238) !important;
            background: rgb(16, 111, 219)
        }
        
        #main-button-text {
            margin-top: 25vh !important;
            user-select: none !important
        }
        
        #cps-history,
        #right-container {
            position: fixed !important;
            margin: 0 !important;
            z-index: 99 !important
        }
        
        #cps-history {
            left: 0 !important;
            top: 0 !important;
            text-align: left !important
        }
        
        #right-container {
            right: 0 !important;
            top: 0 !important;
            text-align: right !important
        }
        
        .cps-history-item,
        #cps-maxval,
        #cps-avgval {
            display: inline-block !important;
            padding: 0 14px 0 14px !important;
            margin-top: 8px !important;
            font-size: 16px !important;
            height: 48px !important;
            line-height: 48px !important;
            vertical-align: middle !important;
            /* user-select: none !important */
        }
        
        .cps-history-item {
            box-shadow: 3px 3px 4px 0 rgba(0, 0, 0, 0.24), 3px 3px 9px 0 rgba(0, 0, 0, 0.19) !important;
            background: rgba(233, 233, 233, 0.8);
            border-radius: 0 24px 24px 0 !important
        }
        
        #cps-maxval,
        #cps-avgval {
            box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.24), -3px 3px 9px 0 rgba(0, 0, 0, 0.19) !important;
            border-radius: 24px 0 0 24px !important
        }
        
        #cps-maxval {
            background: rgba(255, 128, 128, 0.8)
        }
        
        #cps-avgval {
            background: rgba(255, 225, 128, 0.8)
        }
        /* #clear-cps-history {
            user-select: none !important
        } */
        /* #clear-cps-history {
            box-shadow: -3px 3px 4px 0 rgba(0, 0, 0, 0.24), -3px 3px 9px 0 rgba(0, 0, 0, 0.19) !important;
            transition-duration: .2s !important;
            border: none !important;
            outline: medium !important;
            font-size: 18px !important;
            padding: 10px !important;
            border-radius: 14px !important;
            background: rgba(128, 255, 196, 0.8);
            display: inline-block !important;
            margin: 20px !important;
            color: rgba(3, 24, 14, 0.8) !important;
            font-weight: normal !important
        }
        
        #clear-cps-history:hover {
            background: rgba(29, 184, 124, 0.8)
        } */
    </style>
    <script>
        "use strict";
        const result_words = ["最后一次测试结果：",
            "倒数第二次测试结果：",
            "倒数第三次测试结果：",
            "倒数第四次测试结果：",
            "倒数第五次测试结果：",
            "倒数第六次测试结果：",
            "倒数第七次测试结果：",
            "倒数第八次测试结果：",
            "倒数第九次测试结果：",
            "倒数第十次测试结果："
        ];

        var nont = false,
            si, cps, tim = 0,
            click = 0,
            test_started = false,
            cps_history_head = localStorage.getItem("nyh-cps-data-head") ? Number(localStorage.getItem("nyh-cps-data-head")) : 0;

        function refresh_cps_history() {
            var result_index = -1,
                cps_maxval = -1,
                cps_avgval = 0,
                cps_itemcount = 0;
            document.getElementById("cps-history").innerHTML = "";
            document.getElementById("right-container").innerHTML = "";
            for (var i = (cps_history_head + 1) % 10, j = 0, k, l; j < 10; i = (i + 1) % 10, ++j) {
                k = localStorage.getItem("nyh-cps-data-history-" + String(i));
                console.log(k);
                if (k) {
                    ++cps_itemcount;
                    cps_avgval += l = Number(k);
                    cps_maxval = l > cps_maxval ? l : cps_maxval;
                    document.getElementById("cps-history").innerHTML += "<div class=\"cps-history-item\">" + k + "</div><br/>";
                }
            }
            if (cps_itemcount) {
                cps_avgval = (cps_avgval / cps_itemcount).toFixed(2);
                document.getElementById("right-container").innerHTML = "<div id=\"cps-maxval\">CPS 最高值：" + String(cps_maxval) + "</div><br/><div id=\"cps-avgval\">CPS 平均值：" + String(cps_avgval) + "</div><br/>";
            }
        }

        function clear_cps_history() {
            localStorage.removeItem("nyh-cps-data-head");
            for (var i = 0; i < 10; ++i) {
                localStorage.removeItem("nyh-cps-data-history-" + String(i));
            }
            refresh_cps_history();
        }

        document.oncontextmenu = function(e) {
            e.preventDefault();
        };

        document.onmousedown = function(e) {
            if (e.button == 2) {
                clear_cps_history();
            }
        }

        function fun() {
            if (nont) {
                return;
            }
            // document.getElementById("clear-cps-history").style.backgroundColor = "rgb(91, 157, 233)";
            if (++click, !test_started) {
                test_started = true;
                document.getElementById("clear-cps-history").style.display = "none";
                si = setInterval(function() {
                    if (++tim == 100) {
                        clearInterval(si);
                        test_started = false;
                        cps = String(click / 10.);
                        document.getElementById("main-button-text").innerHTML = "本次测试的结果为：" + cps + "<br/>请等待 1.5 秒以防止误触";
                        click = tim = 0;
                        document.getElementById("main-button").style.backgroundColor = "rgb(2, 167, 52)";
                        nont = true;
                        localStorage.setItem("nyh-cps-data-history-" + String(cps_history_head), cps);
                        refresh_cps_history();
                        localStorage.setItem("nyh-cps-data-head", cps_history_head = (cps_history_head + 1) % 10);
                        setTimeout(function() {
                            nont = false;
                            document.getElementById("main-button").style.backgroundColor = "rgb(16, 111, 219)";
                            document.getElementById("main-button-text").innerHTML = "点击以开始测试 CPS";
                            document.getElementById("clear-cps-history").style.display = "inline-block";
                        }, 1500);
                    } else {
                        document.getElementById("main-button-text").innerHTML = "点击 × " + String(click) + "<br/>时间：" + String(tim / 10.) + "秒";
                    }
                }, 100);
            }
            // document.getElementById("clear-cps-history").style.backgroundColor = "rgb(16, 111, 219)";
        }
    </script>
</head>

<body onload="refresh_cps_history()">
    <div id="main-button" onclick="fun()">
        <span id="main-button-text">点击以开始测试 CPS</span>
        <br/>
        <span id="clear-cps-history">按 鼠标右键 清除以往的测试记录</span>
    </div>
    <div id="cps-history"></div>
    <div id="right-container"></div>
</body>

</html>